import React = require("react");

export default class TempView extends React.Component<{}, {}>{
    render() {
        return <>
        </>
    }
}

// import React = require("react");
// import { PageDesigner, EditorPanel, ComponentDefine, ComponentData } from "maishu-jueying";
// import "jquery-ui"
// import { ComponentPanel } from "../component-panel";
// import { PageProps } from "maishu-chitu-react";
// import { ComponentInfo } from "components/common/component";
// import "mobile/user-application";
// import { buttonOnClick } from "maishu-ui-toolkit";
// import { LocalService } from "services/local-service";
// import { defaultPageDatas } from "services/page-datas";
// import { MyPageDesigner } from "controls/design-view";
// import { contextName } from "../constants";

// requirejs({ context: contextName}, ["css!devices"]);


// interface State {
//     pageData?: ComponentData
// }

// export default class TempView extends React.Component<PageProps, State> {
//     designer: PageDesigner;
//     editorPanel: EditorPanel;
//     componentPanel: ComponentPanel;
//     localService: LocalService;

//     constructor(props) {
//         super(props);

//         this.state = {
//             pageData: defaultPageDatas.empty()
//         };
//         this.localService = this.props.createService(LocalService);
//     }
//     async save() {

//     }
//     // private setComponentPath(data: ComponentData, componentPaths: { name: string, path: string, style: string }[]) {
//     //     let stack = [data];
//     //     while (stack.length > 0) {
//     //         let item = stack.pop() as ComponentData;
//     //         let componentPath = componentPaths.filter(o => o.name == item.type)[0];
//     //         if (componentPath) {
//     //             item.path = componentPath.path;
//     //             item.style = componentPath.style;
//     //         }
//     //         (item.children || []).forEach(c => {
//     //             stack.push(c);
//     //         });
//     //     }
//     // }
//     async componentDidMount() {
//         let componentInfos: ComponentInfo[] = await this.localService.componentInfos();//getComponentInfos(this.props.app);
//         console.assert(componentInfos != null);
//         let components = componentInfos.map(o => ({
//             componentData: {
//                 type: o.name,
//                 props: {
//                     attr: { movable: false, container: false, showHandler: false, resize: false }
//                 },
//             },
//             displayName: o.displayName,
//             icon: o.icon,
//             introduce: o.introduce
//         }) as ComponentDefine)
//         this.componentPanel.setComponets(components);

//         this.editorPanel.designer = this.designer;
//         this.componentPanel.designer = this.designer;

//         // let record = await this.localService.getPageDataRecordByName("temp");
//         // if (record != null) {
//         //     this.setState({ record: pageData }, () => {

//         //         // let body = this.state.pageData.children.filter(o => o.type == BODY_TAG)[0];
//         //         // console.assert(body.props.id);
//         //         // let bodyElement = document.getElementById(body.children[0].props.id);
//         //         // console.assert(bodyElement != null);
//         //         // this.componentPanel.setDropTarget(document.getElementById(body.children[0].props.id).children[0]);
//         //     });
//         // }
//         // else {
//         //     // this.componentPanel.setComponets(components);

//         //     // let body = this.state.pageData.children.filter(o => o.type == BODY_TAG)[0];
//         //     // console.assert(body.props.id);
//         //     // let bodyElement = document.getElementById(body.children[0].props.id);
//         //     // console.assert(bodyElement != null);
//         //     // this.componentPanel.setDropTarget(document.getElementById(body.children[0].props.id).children[0]);

//         // }
//     }
//     render() {
//         let { pageData } = this.state;
//         return <React.Fragment>
//             <div className="marvel-device iphone8 black pull-left">
//                 <div className="top-bar"></div>
//                 <div className="sleep"></div>
//                 <div className="volume"></div>
//                 <div className="camera"></div>
//                 <div className="sensor"></div>
//                 <div className="speaker"></div>
//                 <div className="screen mobile-page">
//                     {pageData ?
//                         <MyPageDesigner ref={e => this.designer = e || this.designer}
//                             pageData={pageData} /> : null}
//                 </div>
//                 <div className="home"></div>
//                 <div className="bottom-bar"></div>
//             </div>

//             <div style={{ marginLeft: 440 }}>
//                 <ul style={{ height: 32, margin: 0, padding: 0 }}>
//                     <li className="pull-right">
//                         <button className="btn btn-sm btn-primary">
//                             <i className="icon-copy"></i><span>更换模板</span>
//                         </button>
//                         <div className="btn-group">
//                             <button className="btn btn-sm btn-primary dropdown-toggle">
//                                 <i className="icon-camera"></i>
//                                 <span>存为快照</span>
//                             </button>
//                             <button type="button" className="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
//                                 <i className="icon-caret-down"></i>
//                             </button>
//                             <ul className="dropdown-menu">
//                                 <li style={{ padding: "6px 0px" }}>
//                                     <a className="btn-link">查看快照<span className="badge pull-right">2</span></a>
//                                 </li>
//                             </ul>
//                         </div>
//                         <button className="btn btn-sm btn-primary">
//                             <i className="icon-eye-open"></i><span>预览</span>
//                         </button>
//                         <button className="btn btn-sm btn-primary"
//                             ref={e => {
//                                 if (!e) return;
//                                 buttonOnClick(e, () => this.save(), { toast: "保存成功!" })
//                             }}>
//                             <i className="icon-save"></i>
//                             <span>保存</span></button>
//                     </li>
//                     <li className=""></li>
//                 </ul>
//                 <hr style={{ margin: 0, marginTop: -2 }} />
//                 <div>
//                     <div className="pull-right" style={{ width: 240 }}>
//                         <div className="panel panel-default">
//                             <div className="panel-heading">页面设置</div>
//                             <ul className="list-group">
//                                 <li className="list-group-item">
//                                     <div className="pull-left" style={{ width: "calc(100% - 60px)" }}>
//                                         显示导航菜单</div>
//                                     <label className="switch">
//                                         <input type="checkbox" className="ace ace-switch ace-switch-5" />
//                                         <span className="lbl middle"></span>
//                                     </label>
//                                 </li>
//                                 <li className="list-group-item">
//                                     <div className="pull-left" style={{ width: "calc(100% - 60px)" }}>
//                                         显示购物车结算栏</div>
//                                     <label className="switch">
//                                         <input type="checkbox" className="ace ace-switch ace-switch-5" />
//                                         <span className="lbl middle"></span>
//                                     </label>
//                                 </li>
//                             </ul>
//                         </div>
//                     </div>
//                     <div style={{ marginRight: 260 }}>
//                         <h5 style={{ display: "block" }}>页面组件</h5>
//                         <ComponentPanel ref={e => this.componentPanel = e || this.componentPanel} />
//                         <EditorPanel ref={e => this.editorPanel = e || this.editorPanel} className="well" />
//                     </div>

//                 </div>
//             </div>
//         </React.Fragment >
//     }
// }